<template>
  <div class="ranking">
    <div class="title">
      <div><router-link to="/rankingmore/hotranking">热歌榜</router-link></div>
      <div><router-link to="/rankingmore/newranking">新歌榜</router-link></div>
      <div><router-link to="/rankingmore/originalranking">原创榜</router-link></div>
      <div><router-link to="/rankingmore/soarranking">飙升榜</router-link></div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.ranking {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
}
.router-link-active {
    color: #fff;
    background-color: #9BB1FF;
}
/* .title {
  display: flex;
  line-height: 30px;
  border-bottom: 3px solid #9bb1ff;
} */
.title > div >a {
  margin-top: 20px;
  padding: 20px 20px;
  line-height: 50px;
  /* background-color: #9bb1ff; */
}
</style>